<template>
    <div class="fitness-upload">
        <el-card>
            <!-- 选择用户 -->
            <el-form :model="form" label-width="120px">
                <el-form-item label="选择用户">
                    <el-select
                        v-model="form.selectedUser"
                        filterable
                        placeholder="请选择用户"
                    >
                        <el-option
                            v-for="user in userList"
                            :key="user.userId"
                            :label="user.username"
                            :value="user.userId"
                        ></el-option>
                    </el-select>
                </el-form-item>

                <!-- 选择体测项目 -->
                <el-form-item label="选择体测项目">
                    <el-select
                        v-model="form.selectedProjects"
                        multiple
                        placeholder="请选择体测项目"
                        @change="handleProjectChange"
                    >
                        <el-option
                            v-for="project in projectOptions"
                            :key="project.value"
                            :label="project.label"
                            :value="project.value"
                        ></el-option>
                    </el-select>
                </el-form-item>

                <!-- 输入学生成绩 -->
                <el-form-item
                    v-for="project in form.selectedProjects"
                    :key="project"
                    :label="getProjectLabel(project)"
                >
                <el-input
                        v-if="project === '6' || project === '7'"
                        v-model="form.scores[project]"
                        :placeholder="`请输入${getProjectLabel(
                            project
                        )}成绩（单位：身高 米，体重 千克）`"
                    ></el-input>
                    <el-input
                        v-if="project === '8'"
                        v-model="form.scores[project]"
                        :placeholder="`请输入${getProjectLabel(
                            project
                        )}成绩（单位：毫升）`"
                    ></el-input>
                    <!-- 50米跑和耐力跑使用分秒格式输入 -->
                    <el-input
                        v-if="project === '4' || project === '2'"
                        v-model="form.scores[project]"
                        :placeholder="`请输入${getProjectLabel(
                            project
                        )}成绩（格式：分:秒.毫秒，例如 1:23.45）`"
                    ></el-input>
                    <!-- 其他项目使用普通输入框 -->
                    <el-input
                         v-if="project === '1' || project === '3'|| project === '5'"
                        v-model="form.scores[project]"
                        :placeholder="`请输入${getProjectLabel(
                            project
                        )}成绩,单位厘米或次`"
                    ></el-input>
                </el-form-item>

                <!-- 上传按钮 -->
                <el-form-item>
                    <el-button type="success" @click="handleBatchUpload"
                        >上传到Kafka</el-button
                    >
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>
  
  <script>
import { fetchUserList } from '@/api/user'
import { putData } from '@/api/kafka'

export default {
    data() {
        return {
            userList: [],
            // 体测项目选项
            projectOptions: [
                { value: '1', label: '立定跳远' },
                { value: '2', label: '耐力跑' },
                { value: '3', label: '引体向上/仰卧起坐' },
                { value: '4', label: '50米跑' },
                { value: '5', label: '坐位体前屈' },
                { value: '6', label: '身高' },
                { value: '7', label: '体重' },
                { value: '8', label: '肺活量' }
            ],
            // 表单数据
            form: {
                selectedUser: '', // 选择的用户
                selectedProjects: [], // 已选择的体测项目
                scores: {} // 学生成绩，键为项目 value，值为成绩
            }
        }
    },
    created() {
        this.fetchUsers()
    },
    watch: {
        'form.selectedProjects': 'handleProjectSelection'
    },
    methods: {
        async fetchUsers() {
            try {
                const response = await fetchUserList()
                this.userList = response.data.records
            } catch (error) {
                this.$message.error('获取用户列表失败')
            }
        },
        // 获取项目的显示名称
        getProjectLabel(projectValue) {
            const project = this.projectOptions.find(
                (item) => item.value === projectValue
            )
            return project ? project.label : ''
        },
        handleProjectSelection() {
            // 如果选择了身高（6），确保体重（7）也被选择
            if (
                this.form.selectedProjects.includes('6') &&
                !this.form.selectedProjects.includes('7')
            ) {
                this.form.selectedProjects.push('7')
            }
            // 如果选择了体重（7），确保身高（6）也被选择
            if (
                this.form.selectedProjects.includes('7') &&
                !this.form.selectedProjects.includes('6')
            ) {
                this.form.selectedProjects.push('6')
            }
        },
        // 处理项目选择变化
        handleProjectChange() {
            // 初始化每个项目的成绩为空
            this.form.selectedProjects.forEach((project) => {
                if (!this.form.scores.hasOwnProperty(project)) {
                    this.$set(this.form.scores, project, '')
                }
            })

            // 移除未选择的项目
            Object.keys(this.form.scores).forEach((project) => {
                if (!this.form.selectedProjects.includes(project)) {
                    this.$delete(this.form.scores, project)
                }
            })
        },

        // 验证时间格式
        validateTimeFormat(time) {
            // 正则表达式验证时间格式：
            // 1. 分秒格式：分:秒.毫秒（毫秒部分可以是 1 到 2 位数）
            // 2. 只有秒：秒.毫秒（毫秒部分可以是 1 到 2 位数）
            const regex = /^(\d{1,2}:\d{2}|\d{1,2})(\.\d{1,2})?$/
            return regex.test(time)
        },

        // 批量上传
        handleBatchUpload() {
            const { selectedUser, selectedProjects, scores } = this.form

            // 校验用户是否选择
            if (!selectedUser) {
                this.$message.warning('请选择一个用户')
                return
            }

            // 校验是否选择了体测项目
            if (selectedProjects.length === 0) {
                this.$message.warning('请至少选择一个体测项目')
                return
            }

            // 检查是否有未输入成绩的项目
            const invalidProjects = selectedProjects.filter(
                (project) => !scores[project]
            )
            if (invalidProjects.length > 0) {
                this.$message.warning(
                    `请为${invalidProjects
                        .map(this.getProjectLabel)
                        .join('、')}输入成绩`
                )
                return
            }

            // 检查分秒格式是否正确
            const timeFormatErrors = []
            selectedProjects.forEach((project) => {
                if (
                    (project === '4' || project === '2') &&
                    !this.validateTimeFormat(scores[project])
                ) {
                    timeFormatErrors.push(this.getProjectLabel(project))
                }
            })

            if (timeFormatErrors.length > 0) {
                this.$message.warning(
                    `以下项目的成绩格式不正确（应为分:秒.毫秒）：${timeFormatErrors.join(
                        '、'
                    )}`
                )
                return
            }

            // 构造上传数据
            const uploadData = {
                userId: selectedUser,
                scores: selectedProjects.map((project) => ({
                    project: project,
                    score: scores[project]
                }))
            }
            putData(uploadData)
            // 模拟上传到 Kafka
            console.log('上传到 Kafka 的数据:', uploadData)
            this.$message.success('成绩上传到 Kafka 成功')
        }
    }
}
</script>
  
  <style scoped>
.fitness-upload {
    padding: 20px;
}
</style>